<template>
    <div class="container" style="height: 100%">
        <el-form class="query-form" :inline="true" :model="formQuery">
            <el-col :span="4">
                <el-form-item>
                    <el-date-picker
                        v-model="formQuery.firstDate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="date"
                        placeholder="选择开始日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-date-picker
                        v-model="formQuery.endDate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="date"
                        placeholder="选择结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-select
                        clearable
                        v-model="formQuery.fkAdministrationId"
                        placeholder="所属管理处"
                    >
                        <el-option
                            v-for="item in administrativeOffice"
                            :key="item.pkBasicdataId"
                            :value="item.pkBasicdataId"
                            :label="item.itemName"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item>
                    <el-input
                        clearable
                        v-model="formQuery.inputString"
                        placeholder="请输入关键字"
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-form-item>
                <el-button @click="query">查询</el-button>
            </el-form-item>
            <el-form-item style="position: absolute; right: 0.2rem;">
                <el-button type="primary" @click="$router.push('./edit')"
                    >新增</el-button
                >
                <el-button type="info" @click="isShowDelete = !isShowDelete"
                    >删除</el-button
                >
            </el-form-item>
        </el-form>
        <div class="div-table" style="padding:0 20px;">
            <el-scrollbar style="height:100%;">
                <el-table
                    ref="multipleTable"
                    class="roomTable"
                    :data="tableData"
                    style="width: 100%"
                >
                    <el-table-column type="selection" v-if="isShowDelete">
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="buildingName"
                        label="楼宇名称"
                        width="150"
                    >
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="addr"
                        label="所属区域"
                    >
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="managementOffice"
                        label="所属管理处"
                        width="150"
                    >
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="repairDate"
                        label="维修时间"
                        width="150"
                    >
                        <template slot-scope="{ row }">
                            {{ row.repairDate | timeFormatFilter('yyyy-mm-dd') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="fkHandleId"
                        label="经手人"
                    ></el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="repairContent"
                        label="维修内容"
                        width="150"
                    >
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        prop="remarks"
                        label="备注"
                        width="150"
                    >
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <router-link
                                class="el-link el-link--primary"
                                :to="'/repair/edit/' + scope.row.pkRepairId"
                                >编辑</router-link
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </div>
        <div class="page-div-placeholder"></div>
        <div class="page-div" style="background: #fff">
            <el-pagination
                layout="prev, pager, next,jumper,sizes"
                :current-page="pageObj.page"
                :page-size="pageObj.pageSize"
                :total="pageObj.total"
                @current-change="currentPageChange"
                @size-change="sizeChange"
                :page-sizes="pageObj.pageSizes"
            >
            </el-pagination>
            <div v-if="isShowDelete" style="position: fixed; right: 10px;bottom:10px;">
                <el-button type="danger" @click="deleteSelect"
                    >确认删除</el-button
                >
                <el-button @click="isShowDelete = false">取消删除</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Loading } from "element-ui";
import { listMixin } from "@/mixin";

import {
    getTwoAll,
    selectNameToId
} from "@/api/common/common";
import { getBuildingName } from "@/api/house/building/building";
import {
    getMaintenanceRecords,
    queryMaintenance,
    delectMaintenanceRecords,
} from "@/api/house/repair/repair";
export default {
    mixins: [listMixin],
    data() {
        return {
            isShowDelete: false,
            formQuery: {},
            building: [],
            tableData: [],
            area: [],
            administrativeOffice: []
        };
    },
    methods: {
        loadData() {
            if (this.where) {
                return queryMaintenance(this.where).then((res) => {
                    let { data, total } = res;
                    this.tableData = data;
                    this.pageObj.total = total;
                });
            } else {
                return getMaintenanceRecords(this.pageObj).then((res) => {
                    let { data, total } = res;
                    this.tableData = data;
                    this.pageObj.total = total;
                });
            }
        },
        deleteSelect() {
            let tableData = this.$refs.multipleTable.selection;
            let repairs = "";
            tableData.forEach((v, i) => {
                repairs += v.pkRepairId + ",";
            });
            if (!repairs) {
                this.$message.warning("请选择要删除的维修记录");
                return;
            }
            this.$confirm("确定删除?", "删除", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delectMaintenanceRecords(repairs).then((res) => {
                    if (res.code === 10000) {
                        this.$message.success("删除成功");
                        this.loadDataProxy();
                    }
                });
            });
        },
        loadSelect() {
            getBuildingName().then((res) => {
                this.building = res.data;
            });
        },
        Init() {
            this.loadDataProxy();
            this.loadSelect();
            getTwoAll(selectNameToId('adminOffice')).then(res => {
                this.administrativeOffice = res.data;
            });
        }
    },
    mounted() {
		this.Init();
    },
};
</script>
<style scoped>
.div-table {
    height: calc(100% - 0.8rem - 0.8rem);
}
</style>
